昨天我實作了「愛心收藏功能」並且透過 localStorage 讓紀錄不會消失。
今天，我要再介紹 localStorage 與 sessionStorage，這是瀏覽器裡非常常用的小工具。

LocalStorage 與 SessionStorage 是什麼？

它們就像是瀏覽器內建的小資料庫，可以讓網站把一些資料「存起來」

• 存在這裡的資料會留在使用者的電腦或手機上
• 不需要伺服器，就能保存資訊

這個功能在很多地方會用到：

• 記住使用者登入狀態
• 保存購物車商品
• 收藏或喜愛清單
• 網站設定（暗色/亮色模式）

兩者區別

簡單程式碼示例

LocalStorage 範例

// 儲存
localStorage.setItem("username", "Sheep");

// 讀取
const name = localStorage.getItem("username");
console.log(name); // Sheep

// 移除
localStorage.removeItem("username");

// 清空全部
localStorage.clear();

SessionStorage 範例

// 儲存
sessionStorage.setItem("token", "abc123");

// 讀取
console.log(sessionStorage.getItem("token")); // abc123

// 關掉分頁 → token 自動消失

是不是跟「存取字典」或「Map」的感覺很像？只要記得用 setItem 存，用 getItem 取就好

用生活化的比喻

• LocalStorage 就像是冰箱：
  你放進去的東西（資料）就一直留著，下次回來還在。
• SessionStorage 就像是桌上的便當：
  這餐吃完（分頁關掉）就沒了，下次要用得再放一次。

我在專案中的應用

在昨天的「愛心收藏功能」裡，我選擇了 localStorage，因為我希望收藏紀錄能一直保留下來。
如果只用 sessionStorage，那使用者關掉頁面之後，所有收藏就會消失。

心得

這兩個東西雖然很簡單，但在網頁開發裡非常實用。
只要懂得用，你就可以：

• 做出「記得我的設定」的功能
• 打造一個簡單的收藏或書籤系統
• 幫使用者節省重複輸入的時間

我覺得 localStorage 對新手來說，是第一個能快速體驗到「前端真的能存東西」的工具，非常推薦先學起來。